<template>
	<view class="content">
		<view class="background">
			<view class="topBar">
				<view class="left_topBar">
					<up-icon name="calendar" label="签到" labelPos="right" color="white" labelColor="white"
						size="28"></up-icon>
				</view>
				<view class="right_topBar">
					<up-icon name="setting" color="white" size="28"></up-icon>
					<up-icon name="chat" color="white" size="28"></up-icon>
				</view>
			</view>

			<view class="card_me">
				<view class="users" @click="handleGet">
					<template v-if="!userInfo.avatarUrl">
						<image class="avatar" src="/static/tt.jpg" mode="aspectFill"></image>
						<view class="nickName">注册/登录</view>
					</template>
					<template v-else>
						<image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
						<view class="nickName">
							{{userInfo.nickName}}
						</view>
					</template>
				</view>
				<view class="card_list">
					<view class="list_item" v-for="(item,index) in data.list1" :key="index">
						<view class="number">
							0
						</view>
						<view class="item">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能列表 -->
		<view class="item_list">
			<view class="lists">
				<uni-list>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" showArrow
						title="个人信息" clickable></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" showArrow
						title="我的购物车" clickable></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" showArrow
						title="用户反馈" clickable></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon4" showArrow
						title="我的邮件" clickable></uni-list-item>
					<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon5" showArrow
						title="分享有礼" clickable></uni-list-item>
				</uni-list>
			</view>
		</view>
		<!-- pop弹出层 -->
		<up-popup :show="data.show" @close="close" closeable round="20">
			<view class="popup">
				<view class="title">
					获取您的昵称、头像
				</view>
				<view class="flex">
					<view class="label">
						获取用户头像：
					</view>
					<button class="avatar_warpper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="userInfo.avatarUrl" mode="aspectFill"></image>
					</button>
				</view>

				<view class="flex">
					<view class="label">
						获取用户昵称：
					</view>
					<input type="nickname" @input="ChangeNickName" />
				</view>
				<button size="default" type="primary" @click="submit">确定</button>
			</view>
		</up-popup>
	</view>
</template>
<script setup>
	import {
		reactive
	} from 'vue'
	import {
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		login,
		getSystemUser
	} from '../../api/api.js'
	// ----------------------------------------------------
	const data = reactive({
		list1: ["点赞", "喜欢", "浏览", "收藏"],
		show: false
	})
	// 用户信息
	const userInfo = reactive({
		nickName: '',
		avatarUrl: ''
	})

	const extraIcon1 = reactive({
		color: '#666666',
		size: '22',
		type: 'auth'
	})
	const extraIcon2 = reactive({
		color: '#666666',
		size: '22',
		type: 'cart'
	})
	const extraIcon3 = reactive({
		color: '#666666',
		size: '22',
		type: 'chatboxes'
	})
	const extraIcon4 = reactive({
		color: '#666666',
		size: '22',
		type: 'email'
	})
	const extraIcon5 = reactive({
		color: '#666666',
		size: '22',
		type: 'gift'
	})

	// 先判断用户的登录状态，实现免登录逻辑
	onLoad(async () => {
		// 如果token存在和用户信息不存在的情况下
		if (uni.getStorageSync('token') && !uni.getStorageSync('userInfo')) {
			const {
				avatarUrl,
				nickName
			} = await getSystemUser()

			userInfo.avatarUrl = avatarUrl
			userInfo.nickName = nickName
		} else if (uni.getStorageSync('token') && uni.getStorageSync('userInfo')) {
			const {
				avatarUrl,
				nickName
			} = JSON.parse(uni.getStorageSync('userInfo'))
			userInfo.avatarUrl = avatarUrl
			userInfo.nickName = nickName
		}
	})

	// 弹出层事件
	const close = () => {
		data.show = false
	}

	const onChooseAvatar = (e) => {
		userInfo.avatarUrl = e.detail.avatarUrl
	}

	const ChangeNickName = (e) => {
		userInfo.nickName = e.detail.value
	}

	const submit = () => {
		// 保存最新用户信息
		uni.setStorageSync('userInfo', JSON.stringify(userInfo))
		data.show = false
	}

	// 点击登录注册
	const handleGet = () => {
		uni.showModal({
			title: "温馨提示",
			content: "亲，需要微信授权登录才能正常使用小程序功能呦~",
			success(res) {
				if (res.confirm) {
					// 需要在小程序进行登录获取code
					uni.login({
						success: async (dataRes) => {
							// 登录
							const res = await login(dataRes).then(res => {
								// 缓存token
								uni.setStorageSync('token', res.token)
							})

							// 获取系统用户
							getSystemUser().then(res => {
								userInfo.avatarUrl = res.avatarUrl
								userInfo.nickName = res.nickName
							})

							// 弹出弹出层
							data.show = true
						}
					})
				}
			}
		})
	}
</script>
<style>
	page {
		background-color: #f4f4f4;
	}
</style>
<style lang="scss" scoped>
	.content {
		height: 100vh;

		.background {
			height: 360rpx;
			background-color: #e97daf;
			border-radius: 0 0 30rpx 30rpx;
			position: relative;

			.topBar {
				padding: 0 8rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.right_topBar {
					width: 120rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			.card_me {
				width: 90%;
				border-radius: 5%;
				height: 300rpx;
				background-color: white;
				position: absolute;
				margin-top: 20rpx;
				left: 5%;
				padding: 10rpx;
				box-shadow: 1px 10rpx 20rpx #ececec;

				.users {
					height: 130rpx;
					display: flex;
					align-items: center;
					margin: 30rpx;

					.avatar {
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
					}

					.nickName {
						margin-left: 20rpx;
						font-size: 35rpx;
						font-weight: bold;
					}
				}

				.card_list {
					height: 150rpx;
					display: flex;
					justify-content: space-evenly;

					.list_item {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;

						.item {
							font-size: 25rpx;
							color: #b3b6b4;
						}

						.number {
							font-size: 35rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		.popup {
			padding: 20rpx;
			border-radius: 20rpx 20rpx 0 0;

			.title {
				margin-bottom: 20rpx;
				font-size: 40rpx;
				text-align: center;
			}

			.flex {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid #f5f5f5;
				padding: 24rpx 0;
			}



			.avatar_warpper {
				border: none;
				border-radius: 10rpx;
				width: 70rpx;
				height: 70rpx;
				margin-left: 20rpx;
				padding: 0;

				image {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}

		.item_list {
			margin-top: 100rpx;
			padding: 20rpx;

			.lists {
				height: 200rpx;
			}
		}
	}
</style>